<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width:70vw;
            height: 70vw;
            font-size: 6vw;
        }
    </style>
</head>
<body>
    <div id="box">
        
    </div>


    <script>


        let box=document.querySelector("box")
        // 移动端默认事件阻止，passive允许阻止
        document.addEventListener("touchstart",(e)=>{e.preventDefault()},{passive:false})

        // -阻止touchstart默认事件
        // 1.滚动条滚动
        // 2.页面缩放
        // 3.超链接
        // 4.所有的鼠标事件，在移动端的执行 目前还能使用，但有延迟
        // 5.所有的表单相关控件获得焦点
        // 6.长按菜单

        // -阻止touchmove默认事件
        // 1.滚动条滚动
        // 2.页面缩放

        // -阻止touchend默认事件
        // 1.焦点获取不了
        // 2，超链接没有效果了

    </script>
</body>
</html>